<!-- 矿工邀请绑定 -->
<template>

  <div class="page">
    <div class="b-desc">
      <p>{{nkName}}</p>
      <p>邀请您成为我名下的矿工</p>
    </div>
    <img src="~assets/images/miner/bg.png" alt="" class="banner">
    <div :class="{active: showAcitveAreaCode, area_code: true}">
      <cube-index-list :data="areaCodeData" title="选择国际手机区号">
        <cube-index-list-group
          v-for="(group, index) in areaCodeData"
          :key="index"
          :group="group">
          <cube-index-list-item
            v-for="(item, index) in group.items"
            :key="index"
            :item="item"
            @select="selectItem" class="index-list-item">
            <div class="ctr">{{item.name}}</div>
            <div class="code">+{{item.value}}</div>
          </cube-index-list-item>
        </cube-index-list-group>
      </cube-index-list>
    </div>
    <div class="form">
      <form autocomplete="on">
        <div class="form-row">
          <div class="area_num" @click="showAreaCode"><span>+{{ form.phone_area }}</span></div><input type="number"
                                                                                           placeholder="请输入手机号"
                                                                                           v-model="form.phone_number"
                                                                                           maxlength="15">
        </div>
        <div class="form-row">
          <input type="number" placeholder="输入验证码" v-model="form.code" maxlength="6">
          <!--<img class="get-img-valid-code" @click="getImgValidCode" :src="validSrc" @load="validLoad">-->
          <div class="get-code" @click="showGEE">{{ time > 0 ? "等待"+time+'秒' : '获取验证码' }}</div>
        </div>
        <!--<div class="form-row code-icon icon valid-code-input">-->
        <!--<input type="text" placeholder="输入图片验证码" v-model="form.image_code" maxlength="4">-->
        <!--&lt;!&ndash;<img class="get-img-valid-code" @click="getImgValidCode" :src="validSrc" @load="validLoad">&ndash;&gt;-->
        <!--<div class="click-valid" id="captchaBox" @click="showGEE">点击验证码</div>-->
        <!--</div>-->
        <!--<div class="form-row code-icon icon code-input">-->
        <!--<input type="number" placeholder="输入短信验证码" v-model="form.code" maxlength="6">-->
        <!--<span class="get-code" @click="getCode">{{  time > 0 ? time+'s' : '获取验证码' }}</span>-->
        <!--</div>-->
        <button @click.prevent="submit">下一步</button>
        <a :href="downloadUrl" class="download" download="yyets" @click="downloadTip">
          <cube-tip ref="tip" direction="bottom" :style="{left: '-23vw',top: '-13.667vw' }"><div style="white-space: nowrap">下载人人钱包APP，请长按页面在浏览器打开</div>
          </cube-tip>
          下载人人钱包APP</a>
      </form>
    </div>
  </div>

</template>

<script>

  import {
    getMbAreaCode,
  } from 'api/register'
  import {
      getGTCode, getCheckCode, verifyCode
  } from 'api'
  import {versions, getQueryString} from 'common/js/utl'
  import 'common/js/gt'
  //Vue.use(Tip)
  let phoneReg = /^[1][3,4,5,7,8][0-9]{9}$/
  let emailReg = /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/
  //alert(versions.wechat)
  export default {
    components: {
      // 'resume': resume
    },
    data () {
      return {
          nodeNickname: getQueryString('nodeNickname'),
        captchaObj: null,
        validSrc: '',
        showAcitveAreaCode: false,
        areaCodeData: [],
        value: true,
        isAuth: false,
        downloadUrl: '',
        form: {
          code: null,
          email: '',
          nickname: '',
          phone_area: '86',
          phone_number: '',
          image_code: '',
          stCode: '',
          invite: '',
          invite_code: '',
          password: '',
          repassword: ''
        },
        time: 0
      }
    },
    beforeRouteEnter (to, from, next) {
      //let inv = getQueryString('invite')
      next((vm) => {
        //vm.form.invite = to.query.invite
        //vm.form.invite = getQueryString('invite')
        vm.form.invite_code = getQueryString('invite_code')
        //vm.getImgValidCode()
        vm.getRegister_ini()
      })
    },
    created () {
      this.downloadUrl = versions.ios ? 'https://testflight.apple.com/join/HtU1EG7M' : 'http://appdown.rrys.tv/yqb_latest.apk'
      getMbAreaCode().then(({data}) => {
        this.areaCodeData = data
      })

    },
      computed: {
        nkName(){
            return decodeURIComponent(this.nodeNickname) || '--'
        }
      },
    methods: {
      validLoad (e) {
        //释放
        window.URL.revokeObjectURL(e.target.src)
      },
      getRegister_ini () {
        return getGTCode()
          .then(data => {
            this.initGeetest(data)
          })
      },
      showGEE () {
        let {phone_number} = this.form
        if (this.time > 0) {
          return
        }
        if (phone_number.length < 7 || (phone_number == '86' && !this.isPoneAvailable(phone_number))) {
          this.toastTip('手机号错误')
          return
        }
        if (!this.captchaObj) {
          this.getRegister_ini()
            .catch(e => {
              let me = this
              me.$createToast({
                time: 3000,
                type: 'warn',
                mask: true,
                txt: e.info || '获取验证码失败,请刷新页面重试'
              }).show()
            })
          return
        }
        if (this.isGetCoding) {
          return
        }

        this.captchaObj.verify()
      },
      captchaSuccess () {
        if (this.isGetCoding) {
          return
        }
        this.isGetCoding = true
        let result = this.captchaObj.getValidate()
        let {phone_number, phone_area} = this.form
        getCheckCode(Object.assign({
            scene: 'superNodeInvite',
          area: phone_area,
          mobile: phone_number,
        }, result))
          .then(data => {
            this.isGetCoding = false
            this.startTime()
            this.isAuth = true
          })
          .catch(e => {
            this.isGetCoding = false
            let me = this
            me.$createToast({
              time: 3000,
              type: 'warn',
              mask: true,
              txt: e.info
            }).show()

          })
      },
      initGeetest ({data}) {
        initGeetest({
          // 以下配置参数来自服务端 SDK
          gt: data.gt,
          challenge: data.challenge,
          offline: !data.success,
          product: 'bind',
          new_captcha: true
        }, (captchaObj) => {
          this.captchaObj = captchaObj
          captchaObj.onSuccess(this.captchaSuccess)
          // captchaObj.onError(function () {
          //   debugger
          // })
        })
      },
      getImgValidCode () {
        if (this.isGetIMGing) {
          return
        }
        this.isGetIMGing = true
        getImage_code(this.form.invite)
          .then(({data}) => {
            this.isGetIMGing = false
            this.validSrc = data
          })
          .catch(e => {
            this.isGetIMGing = false
          })

      },
      showAreaCode () {
        this.showAcitveAreaCode = true
      },
      selectItem (item) {
        this.form.phone_area = item.value
        this.showAcitveAreaCode = false
      },
      downloadTip () {
        this.$refs.tip.show()
        if (versions.android && versions.wechat) {
          this.$refs.tip.show()
          if (this.isTipShow) {
            return
          }
          this.isTipShow = true
          setTimeout(() => {
            this.$refs.tip.hide()
            this.isTipShow = false
          }, 2000)
        }
      },
      download () {
        try {
          let elemIF = document.createElement('iframe')
          elemIF.src = versions.ios ? 'https://testflight.apple.com/join/HtU1EG7M' : 'http://appdown.rrys.tv/yqb_latest.apk'
          elemIF.style.display = 'none'
          document.body.appendChild(elemIF)
        } catch (e) {

        }
      },
      validForm () {
        let errTip
        let {code, invite_code} = this.form
        // if (!this.isAuth) {
        //   this.toastTip('请先获取验证码')
        //   return false
        // }
        if (!invite_code) {
          this.toastTip('缺少邀请码')
          return false
        }
        if (!code) {
          this.toastTip('验证码错误')
          return false
        }
        return true
      },
      isEmpty (str) {
        return !str.trim()
      },
      toastTip (info) {
        this.$createToast({
          time: 2500,
          type: 'warn',
          txt: info
        }).show()
      },
      isPoneAvailable (pone) {
        if (!phoneReg.test(pone)) {
          return false
        } else {
          return true
        }
      },
      isEmailAvailable (email) {
        if (!emailReg.test(email)) {
          return false
        } else {
          return true
        }
      },
      startTime () {
        this.time = 119
        this.timeInt = setInterval(() => {
          if (this.time < 2) {
            clearInterval(this.timeInt)
            this.timeInt = null
          }
          --this.time
        }, 1000)
      },
      getResultStatus(s){
          switch (s) {
              case 0:
                  return 3
              case 1:
                  return 2
              case 3:
                  return 1
              default:
                  return 3
          }
      },
      async submit () {
        if (this.isSubmiting) {
          return
        }
        let {invite, code, invite_code, phone_number, phone_area} = this.form
        if (!this.validForm()) {
          return
        }

        try {
            let dt = await  verifyCode({
                //scene: 'superNodeInvite',
                code: invite_code,
                phoneArea: phone_area,
                phone: phone_number,
                phoneCode: code,
                source: 1
            })
            let {data, info} = dt
            let {status, sign} = data
            let type, path, query
            info = encodeURIComponent(info)
            if(sign){
                path = '/minerRegister'
                query = {
                    nodeNickname: this.nodeNickname,
                    sign,
                    invite_code,
                    phone_area,
                    phone_number,
                    source: 1,
                    info
                }
            }else{
                path = '/invitationResult'
                query = {
                    superNodeName: this.nodeNickname,
                    status:  this.getResultStatus(status),
                    failureText1: info,
                    failureText2: info
                }

            }
            this.$router.push({path, query})
        }catch (e) {
            this.toastTip(e.info)
        }
          this.isSubmiting = false

      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "~common/scss/variable";
  @import "~common/scss/mixin";

  $color: #5A99FF;
  .page {
    height: 100%;
    overflow: auto;
    background: #121D3B;
    color: #fff;
    font-size: 26px;
    padding-bottom: 60px;
    position: relative;
  }

  .b-desc {
    position: absolute;
    top: 204px;
    width: 100%;
    font-size: 30px;
    text-align: center;
    font-weight:600;
    color:#9FD1FC;
    line-height: 1.3;
    p {
      background:linear-gradient(0deg,rgba(255,255,255,1) 0%, rgba(181,230,255,1) 100%);
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
    }
    p:nth-of-type(1) {
      margin-bottom: 18px;
    }
  }

  .banner {
    display: block;
    min-height: 680px;
    width: 100%;
  }

  .index-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #eaeaea;
    line-height: 3;
    padding: 0 4em 0 1em;
  }

  .form {
    margin: 0 96px;
    padding-top: 20px;
    input {
      color: #9FD1FC;
      font-size: 26px;
      &::placeholder {
        color: #9FD1FC;
      }
    }
  }

  .form-row {
    display: flex;
    margin-bottom: 32px;
    height:80px;
    border:2px solid rgba(159,209,252,1);
    input {
      flex: 1;
      background: transparent;
      text-indent: 22px;
    }
    &.code-input {
      input {
        width: 6em;
      }
    }
  }

  .area_num {
    display: flex;
    width: 102px;
    align-items: center;
    padding-right: 3px;
    span {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    &::after {
      content: '';
      display: inline-block;
      border: 9px solid transparent;
      border-top-color: #9fd1fc;
      width: 0;
      height: 0;
      margin-top: 4px;
    }
  }

  .get-code {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 198px;
    font-size: 24px;
    border-left: 2px solid rgba(159,209,252,1);
  }

  button {
    display: block;
    width: 100%;
    height: 80px;
    background: url("~assets/images/miner/btn-bg.png") no-repeat center center;
    background-size: cover;
    @include button(41px);
    color: #121D3B;
    margin-bottom: 32px;
    margin-top: 158px;
  }

  .download {
    height:80px;
    border:2px solid rgba(159,209,252,1);
    border-radius:40px;
    color: #9FD1FC;
    text-align: center;
    display: block;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .icon::before {
    content: '';
    width: 19px;
    height: 19px;
    display: inline-block;
    background-size: contain;
    background: no-repeat center center;
    margin-right: 8px;
    transform: translateY(5px);
  }


  .valid-code-input {
    input {
      width: 6em;
    }
    img {
      width: 110px;
      height: auto;
      margin-bottom: 5px;
    }
    .click-valid {
      width: 110px;
      height: 30px;
      line-height: 30px;
      text-align: center;
    }
  }


  .area_code {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
    height: 100%;
    width: 100%;
    color: #333;
    &.active {
      display: block;
    }
  }


</style>
